package com.tencent.compose.sample.mainpage.sectionItem

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.DrawerValue
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch
import org.jetbrains.compose.ui.tooling.preview.Preview

@Preview()
@Composable
internal fun TopAppBarDemo() {
    // 1. 创建Scaffold状态管理对象，用于控制抽屉等组件状态
    val scaffoldState = rememberScaffoldState(
        drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    )

    // 2. 创建协程作用域，用于处理需要在协程中执行的操作（如抽屉状态变更）
    val coroutineScope = rememberCoroutineScope()

    // 3. 状态管理：记录收藏按钮的选中状态
    var isFavorite by remember { mutableStateOf(false) }

    // 使用Scaffold作为父容器，提供完整的页面结构
    Scaffold(
        scaffoldState = scaffoldState,
        // 顶部导航栏配置
        topBar = {
            TopAppBar(
                // 导航栏与系统窗口的边距设置，使用默认值适配状态栏
                windowInsets = AppBarDefaults.topAppBarWindowInsets,

                // 导航栏标题
                title = {
                    Text(
                        text = "顶部导航栏",
                        fontSize = 18.sp,
                        textAlign = TextAlign.Center,
                        modifier = Modifier.fillMaxWidth() // 标题占满宽度实现居中
                    )
                },

                // 左侧导航图标区域
                navigationIcon = {
                    IconButton(
                        onClick = {
                            // 点击打开/关闭抽屉菜单
                            coroutineScope.launch {
                                if (scaffoldState.drawerState.isOpen) {
                                    scaffoldState.drawerState.close()
                                } else {
                                    scaffoldState.drawerState.open()
                                }
                            }
                        }
                    ) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "打开侧边菜单", // 无障碍描述
                            tint = Color.White // 图标颜色
                        )
                    }
                },

                // 右侧操作按钮区域
                actions = {
                    // 收藏按钮
                    IconButton(
                        onClick = { isFavorite = !isFavorite }, // 切换收藏状态
                    ) {
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = if (isFavorite) "取消收藏" else "添加收藏",
                            tint = if (isFavorite) Color.Red else Color.White // 状态变色
                        )
                    }

                    // 更多选项按钮
                    IconButton(
                        onClick = { /* 打开更多操作菜单的逻辑 */ }
                    ) {
                        Icon(
                            imageVector = Icons.Filled.MoreVert, // 更多选项图标
                            contentDescription = "更多操作",
                            tint = Color.White
                        )
                    }
                },

                // 导航栏背景色
                backgroundColor = Color(0xFF6200EE),

                // 导航栏阴影高度，增强层次感
                elevation = 4.dp
            )
        },

        // 抽屉菜单内容
        drawerContent = {
            Text(
                text = "侧边抽屉菜单",
                modifier = Modifier.padding(16.dp)
            )
        }
    ) { innerPadding ->
        // 主内容区域，使用innerPadding避免被导航栏遮挡
        Text(
            text = "主页面内容",
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxWidth()
                .padding(16.dp)
        )
    }
}
